import React, { useState } from "react";
import { MyNavBar } from "../../../../components";
import style from "./style.module.scss";
import { useNavigate } from "react-router-dom";
import nextBtn from "../../../../assets/images/icon/xxhdpi/my_icon_next_n.png";
import { useRequest } from "ahooks";
import { getUserWallet, postDrawCash } from "../../../../api/wallet";
import { WalletDataState } from "../myWallet";

const Index: React.FC = () => {
  const navigate = useNavigate();
  // 提现金额
  const [amount, setAmount] = useState<number>(0);
  // const walletData = 0;
  // // 钱包请求hooks
  const {
    data: walletData = {
      id: 0,
      doctorId: 0,
      balance: 0,
      version: 0,
      whetherBindIdCard: 0,
      whetherBindBankCard: 0,
    },
  } = useRequest<WalletDataState, []>(async () => {
    const resp = await getUserWallet();
    return resp.result as WalletDataState;
  });

  // 提现请求hooks
  const { data: message = "", run } = useRequest<string, []>(
    async () => {
      const data = {
        money: amount,
      };
      const resp = await postDrawCash(data);
      return resp.message;
    },
    {
      manual: true,
      onSuccess(res) {
        navigate("/my/wallet/withdrawaling", {
          replace: true,
          state: { money: amount },
        });
      },
    }
  );

  // 选中全部提现
  const handleAllChange = (e: any) => {
    if (e.target.checked) {
      setAmount(Math.floor(walletData.balance / 100));
    }
  };

  return (
    <div>
      <MyNavBar
        title="H币提现"
        onClickLeft={() => navigate(-1)}
        rightText={
          <div onClick={() => navigate("/my/wallet/withdrawal/records")}>
            提现记录
          </div>
        }
        style={{ background: "#fff" }}
      ></MyNavBar>
      <div className={style["main-wrapper"]}>
        <div className={style["main-content"]}>
          <div className={style["content-header"]}>
            <dl>
              <dt>
                <p>到账银行卡</p>
                <div>
                  <p>中国建设银行</p>
                  <p className={style["account-time"]}>当天24点前到账</p>
                </div>
              </dt>

              <dd>
                <img src={nextBtn} alt="" />
              </dd>
            </dl>
          </div>
          <div className={style["content-body"]}>
            <h4>提现金额</h4>
            <div className={style["content-amount"]}>
              <div className={style["amount-unit"]}>￥</div>
              <input
                className={style["amount-price"]}
                value={amount}
                onChange={(e) => {
                  const value = e.target.value;
                  setAmount(Number(value));
                }}
              />
            </div>

            <div className={style.lightline}></div>
          </div>
          <div className={style["content-operate"]}>
            <div className={style.allwithdraw}>
              <input type="checkbox" onChange={handleAllChange} />
              <span>
                全部提现。{walletData.balance}H币，可提现
                {Math.floor(walletData.balance / 100)}
                元。
              </span>
            </div>
            <button
              className={style["operate-btn"]}
              onClick={() => {
                run();
              }}
            >
              提现
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Index;
